<template>
  <div>
    <!-- v-model: 进行双向绑定, 目前只能用在表单元素上 -->
    <!-- 下拉菜单的 v-model 写在 select 标签中 -->
    <!-- 关联的是 option 的value 值 -->
    来自于:
    <select v-model="from" name="" id="">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="wh">武汉</option>
    </select>
    <br>
    <!-- v-model 用在复选框时 -->
    <!-- vue 变量为数组时 绑定的是value -->
    <!-- vue 变量为非数组时 绑定的是checked属性   勾选状态选中为 true 未选中为 false -->
    爱好:
    <input v-model="hobby" type="checkbox" value="smoke">抽烟
    <input v-model="hobby" type="checkbox" value="drink">喝酒
    <input v-model="hobby" type="checkbox" value="hotHead">烫头
    <br>
    <input v-model="isChecked1" type="checkbox" value="smoke">抽烟
    <input v-model="isChecked2" type="checkbox" value="drink">喝酒
    <input v-model="isChecked3" type="checkbox" value="hotHead">烫头
    <br>
    性别:
    <input v-model="gender" type="radio" name="gander" value="man">男
    <input v-model="gender" type="radio" name="gander" value="woman">女
    <br>
    自我介绍:
    <textarea v-model="intro" name="" id="" cols="30" rows="10"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      from: '',
      hobby: [],
      isChecked1: '',
      isChecked2: '',
      isChecked3: '',
      gender: '',
      intro: ''
    }
  }
}
</script>

<style>

</style>